<template>
    <div class="search">
        <!-- 搜索框 -->
        <el-autocomplete
            clearable
            placeholder="请你输入医院名称"
            v-model="hosname"
            :fetch-suggestions="fetchData"
            :trigger-on-focus="false"
            @select="goDetail"
        />
        <el-button type="primary" size="default" :icon="Search">搜索</el-button>
    </div>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import {useRouter} from 'vue-router'
import {ref} from 'vue';
// 引入请求方法
import {reqHospitalInfo} from '@/api/home/index'
import type { HospitalInfo } from "@/api/home/type";

// 创建路由器对象
let $router = useRouter();

// 收集搜索的关键字(医院的名字)
let hosname =ref<string>('');
// 顶部组件的回调
const fetchData =async(keyword:string,cb:any)=>{
    // 当用户输入完关键字，此函数会执行一次，发请求获取需要展示的数据即可
    let result:HospitalInfo=await reqHospitalInfo(keyword);
    // console.log(result.data.data);
    // 整理数据，变成人家组件需要的数据格式
    let showData = result.data.data.map(item=>{
        return {
            // 展示医院名字
            value:item.hosname,
            // 存储医院编码
            hoscode:item.hoscode
        }
    })
    cb(showData);
    // cb(result.data.data); 无法展示，不符合UI官方组件库的数据格式
}

// 点击某一个推荐项
const goDetail = (item:any)=>{
    // 点击推荐项目进入医院详情页，将来需要携带query参数(医院的编码)
    $router.push({path:'/hospital/register',query:{hoscode:item.hoscode}})
}

</script>
<script lang="ts">
export default{
    name:'Search'
}
</script>
<!-- 深度选择器，对第三方组件库样式进行修改  >>>  /deep/  ::v-deep -->
<style scoped lang="scss">
.search {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    :deep(.el-input__wrapper){
        width: 600px;
        margin-right: 10px;
    }
}
</style>
